<template>
  <div>
    <el-dialog title="订单详情"
               :visible.sync="dialogData.show"
               center
               @close="$emit('closedialog')"
               :close-on-click-modal='false'
               width="60%">
      <div class="hasborder">
        <p>订单信息：</p>
        <ul>
          <li>
            <span>订单编号：</span>
            <span>{{formdata.orderNumber}}</span>
          </li>
          <li>
            <span>订单金额：</span>
            <span>{{formdata.money}}</span>
          </li>
          <li>
            <span>所属分类：</span>
            <span v-if="formdata.healthRiskType">{{formdata.healthRiskType.name}}</span>
          </li>
          <li>
            <span>订单商品：</span>
            <span>{{formdata.name}}</span>
          </li>
          <li>
            <span>服务选项：</span>
            <span>{{formdata.serviceItem}}</span>
          </li>
          <li>
            <span>支付类型：</span>
            <span>{{formdata.payType == 1 ? '支付宝' : formdata.payType==2?'微信':'其他'}}</span>
          </li>
          <li>
            <span>订单来源：</span>
            <span>{{formdata.channelName}}</span>
          </li>
          <li>
            <span>订单时间：</span>

            <span>{{commonFunction.timestampFormat(new Date(formdata.createTime), 'yyyy-MM-dd hh:mm')}}</span>
          </li>

        </ul>
      </div>
      <div class="hasborder">
        <p>购买人信息：</p>
        <ul>
          <li>
            <span>姓名：</span>
            <span v-if="formdata.user">{{formdata.user.nickName}}</span>
          </li>
          <li>
            <span>账号：</span>
            <span v-if="formdata.user">{{formdata.user.loginName}}</span>
          </li>
        </ul>
      </div>
      <div class="hasborder">
        <p>使用人信息：</p>
        <ul>
          <li>
            <span>姓名：</span>
            <span v-if="formdata.member">{{formdata.member.name}}</span>
          </li>
          <li>
            <span>联系电话：</span>
            <span v-if="formdata.member">{{formdata.member.phone}}</span>
          </li>
        </ul>
      </div>
      <div class="hasborder"
           v-if="formdata.orderStatus == 7">
        <p>退款信息：</p>
        <ul>
          <li>
            <span>申请退款时间：</span>
            <span>{{formdata.refundTime}}</span>
          </li>
        </ul>
      </div>
      <div class="hasborder"
           v-if="formdata.orderStatus == 3 && formdata.promoteAccount">
        <p>推销人信息：</p>
        <ul>
          <li>
            <span>姓名：</span>
            <span v-if="formdata.promoter">{{formdata.promoter.nickName}}</span>
          </li>
          <li>
            <span>账号：</span>
            <span v-if="formdata.promoter">{{formdata.promoter.loginName}}</span>
          </li>
          <li>
            <span>执业单位：</span>
            <span v-if="formdata.promoter">{{formdata.promoter.hospitalName}}</span>
          </li>
        </ul>
      </div>
      <div class="hasborder"
           v-if="(formdata.orderStatus == 8 || formdata.orderStatus == 4) && formdata.detectAccount">
        <p>检测状态：</p>
        <el-table :data="formdata.detectList">
          <el-table-column prop="name"
                           label="检测项目"></el-table-column>
          <el-table-column prop="date"
                           label="对应指标"
                           v-if="formdata.orderStatus == 8">
            <template slot-scope="scope">
              <div v-for="it in scope.row.deviceList"
                   :key="it.deviceId">{{it.deviceName}},</div>
            </template>
          </el-table-column>
          <el-table-column prop="date"
                           :label="formdata.item.unit == 1 ?'时长/次数':'检测次数'">
            <template slot-scope="scope">
              <span v-if="formdata.item.unit == 1"> {{scope.row.count}}小时</span>
              <span v-else>{{scope.row.detectCount}}/{{scope.row.count}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date"
                           label="状态"
                           v-if="formdata.orderStatus == 4">
            <template>
              监测中
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-button type="primary"
                 @click="$emit('closedialog')"
                 style="margin-left:45%;margin-top:20px">返 回</el-button>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: ['dialogData'],
    data () {
      return {
        formdata: {

        }
      }
    },
    methods: {

    },
    mounted () {
      if (this.dialogData.info) {

        this.post(this.api.cooperationHospital.getHealthCheckPackageOrderDetail, {
          id: this.dialogData.info
        }).then(res => {
          if (res.data.code === '200') {
            this.formdata = res.data.object
          } else {
            this.$Message.error(res.data.message);
          }
        })

      }
    }
  }
</script>

<style lang='scss' scoped>
  .hasborder {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-top: 10px;
    p {
      font-size: 16px;
      font-weight: bold;
    }
    ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 30%;
        padding: 10px 0;
      }
    }
  }
</style>